<template>
  <el-dialog title='新增云柜员对应技能组' :visible.sync='isShow' width='700px' :lock-scroll=false :close-on-click-modal=false @close='clearForm("queryForm")' @open="initializtaion">
    <div v-loading="loading">
      <div class="detailInfo">
        <el-card class='type-info-box-card'>
          <el-row>
            <el-col :lg='24'>
              <el-form ref='queryForm' size='mini' :model="queryForm" label-width="140px" :rules="rules" label-position="center">
                <!-- <el-row :gutter="50" >
                            <el-col :span='100' style="width:540px">
                               <el-form-item label='机构编号' class='typeInfo-el-form-item' prop='BRANCHNO'>
                                   <select-tree ref="tree" v-model="queryForm.BRANCHNO" :single-check="true"   @check-change="queryTeller"
                                    :props='{id:"branchId",label: "branchName",children: "childBranch"}' :tree-data="brno"></select-tree>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                <el-row :gutter="50">
                  <el-col :span='100'>
                    <el-form-item label='柜员名称' prop='AGENTID'>
                      <el-select v-model='queryForm.AGENTID' filterable style="width:350px">
                        <el-option v-for='item in AGENTIDS' :key='item.AGENTNAME' :label='item.AGENTNAME' :value='item.AGENTID'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span='400'>
                    <el-form-item label='技能组类型' prop='handleSelectValue'>
                      <div style="height:40px">
                      </div>
                      <el-transfer 
                        v-model="queryForm.handleSelectValue" 
                        :props="{key:'value',label:'desc'}" 
                        :data="BUSITYPEPOOL" 
                        :titles="['技能组列表','已选技能组']" 
                        filter-placeholder="请选择技能" 
                        style="width:550px;margin-left: -70px; padding-bottom:10px">
                      </el-transfer>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row :gutter="50">
                            <el-col :span='100' >
                                <el-form-item label='工作日可用' prop='WORKDAY'>
                                      <el-select v-model='queryForm.WORKDAY' style="width:350px" >
                                          <el-option v-for='item in tellerWorkdayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                          </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row> 
                          
                          <el-row :gutter="350">
                            <el-col :span='100' >
                                <el-form-item label='节假日可用' prop='HOLIDAY'>
                                      <el-select v-model='queryForm.HOLIDAY' style="width:350px" >
                                          <el-option v-for='item in tellerHolidayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                          </el-option>
                                      </el-select>
                                </el-form-item>
                            </el-col>
                          </el-row>  -->
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div slot="footer" style="margin:10px 0;text-align:center">
        <el-button size="mini" @click="isShow=false">取消</el-button>
        <el-button type='primary' size='mini' @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import DateUtils from '@/CTManage/utils/DateUtils';
  import request from "@/common/utils/requestCT";
  import cloudTellerAdd from "@/message/CTManage/teller/cloud-teller-add";
  import selectTree from "@/components/selectTree2/";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
  import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
  import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
  import tellerMatchSkillAdd from "@/message/CTManage/teller-match-skill/teller-match-skill-add";
  import TellerMatchSkillQuery from "@/message/CTManage/teller-match-skill/teller-match-skill-query";
  export default {
    components: {
      selectTree
    },
    data() {
      let virtualTellerCheck = (rule, value, callback) => { //自定义表单验证 校验虚拟柜员号    
        this._handleSelectValue = this.queryForm.handleSelectValue;
        if (value != "") {
          let resBody = new TellerMatchSkillQuery();
          resBody.data.AGENTID = this.queryForm.AGENTID
          this.loading = true;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode == "000000") {
                this.tableData = response.RSP_BODY.resultSet;
                for (let i in this.BUSITYPEPOOL) {
                    const BUSITYPE_pool = this.BUSITYPEPOOL[i]["value"];
                    this.BUSITYPEPOOL[i]['disabled'] = false;
                    for (let j in this.tableData) {
                      const BUSITYPE_table = this.tableData[j]["BUSITYPE"];
                      if (BUSITYPE_pool === BUSITYPE_table) {
                        this.BUSITYPEPOOL[i]['disabled'] = true;
                        break;
                      }
                    }
                }
                // 移到左边
                this.queryForm.handleSelectValue = [];
                // 移到右边
                // this.queryForm.handleSelectValue=[]
                // for (let i in this.tableData) {
                //   this.queryForm.handleSelectValue.push(
                //     this.tableData[i].BUSITYPE
                //   )
                // }
                let _BUSITYPEPOOL = this.BUSITYPEPOOL;
                this.BUSITYPEPOOL = [];
                this.BUSITYPEPOOL = _BUSITYPEPOOL;
                callback();
              } else {
                callback();
              }
              this.loading= false;
            })
            .catch(error => {
              console.log(error);
              this.loading= false;
            });
        }
      };
      return {
        loading: false,
        brno: [],
        querySkills: [],
        BUSITYPEPOOL: [],
        _handleSelectValue: [],
        queryForm: { //表单数据
          BRANCHNO: [],
          AGENTID: '',
          handleSelectValue: [],
          WORKDAY: '',
          HOLIDAY: ''
        },
        AGENTIDS: [],
        telletstatusOpions: [{
            label: '正常',
            value: '1'
          },
          {
            label: '离岗',
            value: '2'
          }
        ],
        rules: { //表单校验规则
          AGENTID: [{
              required: true,
              message: "请输入柜员名称",
              trigger: "change"
            },
            {
              validator: virtualTellerCheck,
              trigger: "change"
            }
          ],
          WORKDAY: [{
            required: true,
            message: "请选择工作日是否可用",
            trigger: "blur"
          }],
          HOLIDAY: [{
            required: true,
            message: "请选择节假日是否可用",
            trigger: "blur"
          }],
          handleSelectValue: [{
            required: true,
            message: "请选择技能",
            trigger: "blur"
          }]
        },
        tellerWorkdayOpions: [{
            label: '可用',
            value: '1'
          },
          {
            label: '不可用',
            value: '0'
          }
        ],
        tellerHolidayOpions: [{
            label: '可用',
            value: '1'
          },
          {
            label: '不可用',
            value: '0'
          }
        ]
      };
    },
    props: {
      option: Object
    },
    methods: {
      initializtaion() {
        this.initQuery();
        this.queryTeller();
        // this.queryForm.handleSelectValue=['AB01','AB02']
      },
      async initQuery() {
        //查询机构
        // let resBody = new spinnerList();
        // resBody.data.spinnerList = [{
        //   spinnerName: "branch"
        // }];
        // let response = await request(resBody);
        // if (response.SYS_HEAD.ReturnCode == "000000") {
        //   this.brno = response.RSP_BODY.branchSpinner;
        // } else {
        //   this.$message({
        //     type: "error",
        //     message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        //   });
        // };
        //查询技能组
        let resBodySkills = new TellerSkillQuery();
        resBodySkills.QueryPageNo = this.currentPage;
        resBodySkills.QueryRowNum = this.pageSize;
        let responseSkills = await request(resBodySkills);
        if (responseSkills.SYS_HEAD.ReturnCode == "000000") {
          this.querySkills = responseSkills.RSP_BODY.resultSet;
          // console.log(this.querySkills);
          // console.log(this.querySkills.length)
          this.generateData();

        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseSkills.SYS_HEAD.ReturnCode + "，错误信息：" + responseSkills.SYS_HEAD.ReturnMessage
          });
        }
      },
      //查询柜员对应技能组
      generateData() {
        const data = [];
        const busitypeData = [];
        for (let i = 0; i < this.querySkills.length; i++) {
          data.push({
            value: this.querySkills[i].BUSITYPE,
            desc: this.querySkills[i].BUSITYPENAME,
            disabled: true,
          })
          busitypeData.push(
            this.querySkills[i].BUSITYPE
          )
        };
        // console.log("busitypeData", busitypeData);
        this.BUSITYPEPOOL = data;
        // this.queryForm.handleSelectValue=busitypeData
        // this.queryForm.handleSelectValue=data
        // console.log("this.queryForm.handleSelectValue",this.queryForm.handleSelectValue)
      },
      //查询柜员
      async queryTeller(nodeVal, nodeObj) {
        // console.log(nodeVal, nodeObj)
        let resBodyTellerQuery = new cloudTellerQuery();
        // if (this.queryForm.BRANCHNO.length == 0) {
        //   resBodyTellerQuery.data.branchNo = this.$store.state.user.branchId;
        // } else {
        //   resBodyTellerQuery.data.branchNo = this.queryForm.BRANCHNO[0];
        // }
        let responseTellerQuery = await request(resBodyTellerQuery);
        if (responseTellerQuery.SYS_HEAD.ReturnCode == "000000") {
          this.AGENTIDS = responseTellerQuery.RSP_BODY.resultSet;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerQuery.SYS_HEAD.ReturnCode + "，错误信息：" + responseTellerQuery.SYS_HEAD.ReturnMessage
          });
        }
      },
      submit() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new tellerMatchSkillAdd();
            // console.log(this.queryForm.handleSelectValue.toString())
            // console.log("lt",this.queryForm.handleSelectValue.length)
            resBody.data.BUSITYPELENGTH = this._handleSelectValue.length;
            // console.log(this.BUSITYPEPOOL.toString())
            resBody.data.BUSITYPE = this._handleSelectValue.toString().replace("\"", "").replace("[", "").replace("]", "");
            resBody.data.AGENTID = this.queryForm.AGENTID;
            resBody.data.WORKDAY = this.queryForm.WORKDAY;
            resBody.data.HOLIDAY = this.queryForm.HOLIDAY;
            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  this.$message({
                    type: "success",
                    message: "柜员对应技能组新增成功!"
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.isShow = false;
                  this.$message({
                    type: "error",
                    message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                  });
                  this.loading = false;
                }
              })
              .catch(error => {
                this.loading = false;
                console.log(error);
              });
          }
        });
      },
      clearForm(item) {
        if (this.BUSITYPEPOOL) {
          for (let i in this.BUSITYPEPOOL) {
            this.BUSITYPEPOOL[i]['disabled'] = true;
          }
        }
        if (this.$refs.queryForm) {
          this.$refs.queryForm.resetFields();
          this.$refs.queryForm.clearValidate();
        }
      }
    },
    computed: {
      isShow: {
        get: function() {
          return this.option.isShow;
        },
        set: function(newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    // mounted() {
    //   window.addEventListener("scroll", this.handleScroll);
    // }
  };
</script>

<style lang="scss" scope>
  .isShow {
    display: none;
  }
  .returnBtn {
    width: 50px;
    height: 50px;
    background: #000;
    opacity: 0.5;
    position: fixed;
    right: 45px;
    bottom: 53px;
    border-radius: 3px;
    text-align: center;
    padding-top: 15px;
  }
  .returnBtn:hover {
    opacity: 0.9;
  }
  .modelMargin {
    margin: 5px;
    .el-card__header {
      height: 65px;
    }
  }
  #returnBtnTop {
    height: 50px;
    background: #409eff;
    width: 100%;
    transition: all 0.3s;
  }
  .editClass {
    input.el-input__inner {
      border: none;
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  .inputWidth100 {
    width: 100%;
  }
</style>
